<template>
  <div>
    <div v-if="type == 'one'">
      <h1>一等奖</h1>
      <div class="outter">
        <span class="importaa">
          {{prize[0]}}
        </span>
      </div>
    </div>
    <div v-if="type == 'two'">
      <h1>二等奖</h1>
      <div class="outter">
        <span class="importaa">
          {{prize[0]}}
        </span>
        <span class="importaa">
          {{prize[1]}}
        </span>
      </div>
    </div>
    <div v-if="type == 'three'">
      <h1>三等奖</h1>
      <div class="outter">
        <span class="importaa">
          {{prize[0]}}
        </span>
        <span class="importaa">
          {{prize[1]}}
        </span>
        <span class="importaa">
          {{prize[2]}}
        </span>
      </div>
    </div>
    <div v-if="type == 'four'">
      <h1>四等奖</h1>
      <div class="outter">
        <span class="importaa">
          {{prize[0]}}
        </span>
        <span class="importaa">
          {{prize[1]}}
        </span>
      </div>
      <div class="outter">
        <span class="importaa">
          {{prize[2]}}
        </span>
        <span class="importaa">
          {{prize[3]}}
        </span>
      </div>
    </div>
    <div v-if="type == 'five'">
      <h1>五等奖</h1>
      <div class="outter">
        <span class="importaa">
          {{prize[0]}}
        </span>
        <span class="importaa">
          {{prize[1]}}
        </span>
        <span class="importaa">
          {{prize[2]}}
        </span>
      </div>
      <div class="outter">
        <span class="importaa">
          {{prize[3]}}
        </span>
        <span class="importaa">
          {{prize[4]}}
        </span>
      </div>
    </div>
    <div v-show="draw_show && stop" class="btn" v-on:click="draw_prize()">抽奖</div>
    <div v-show="draw_show && !stop" class="btn" v-on:click="draw_stop()">停止</div>
    <div class="btn" v-on:click="go_back()">返回</div>
    <div class="btn" v-on:click="delete_last()">重抽</div>
  </div>

</template>

<script>
import Vue from 'vue'
export default {
  name: 'draw',
  data () {
    return {
      type:this.$route.params.type,
      prize: [],
      draw_count: 0,
      stop: true,
      draw_show: false,
      count_map: {'one':1, 'two':2, 'three':3, 'four':4, 'five':5},
      int_flag: '',
      last_name: '',
      name_i: 0,
      name_j: 0
    }
  },
  created(){
    this.init_prize(false);
  },
  methods: {
    delete_last(){
      var data = localStorage.getItem(this.type);
      this.prize.splice(this.prize.length - 1, 1); 
      console.log(this.prize);
      localStorage.setItem(this.type, JSON.stringify(this.prize));
      this.init_prize(false);
    },
    init_prize(flag){
      var data = localStorage.getItem(this.type);
      if(!data){
          this.draw_show = true;
          return;
      }
      data = JSON.parse(data);
      this.draw_count = data.length;
      if(this.draw_count >= this.count_map[this.type]){
        this.draw_show = false;
      }
      else{
        this.draw_show = true;
      }
      if(this.type != 'one' || !flag){
        this.prize = data;
      }
      else{
        for(var i in data){
          if(i == (data.length - 1)){
            this.last_name = data[i];
            this.name_i = i;
            this.name_j = 0;
            this.type_it();
          }
          else{
            this.prize[i] = data[i];
          }
        }
      }
    },
    type_it(){
      Vue.set(this.prize,this.name_i,this.last_name.substring(0, this.name_j + 1))
      if(this.name_j < this.last_name.length - 1){
        this.name_j++;
        setTimeout(this.type_it, 2000);
      }
    },
    draw_prize(){
      var res = this.draw();
      this.prize.push(res);
      localStorage.setItem(this.type, JSON.stringify(this.prize));
      this.stop = false;
      this.int_flag = setInterval(this.timer, 10);
    },
    draw(){
      var name_list = JSON.parse(localStorage.getItem('name_list'));
      var index = Math.floor((Math.random() * name_list.length));
      var result = name_list[index];
      name_list.splice(index, 1);
      localStorage.setItem('name_list', JSON.stringify(name_list));
      return result;
    },
    draw_stop(){
      this.stop = true;
      this.draw_count++;
      clearInterval(this.int_flag);
      this.init_prize(true);
    },
    timer(){
      if(this.stop){
        return;
      }
      var name_list = JSON.parse(localStorage.getItem('name_list'));
      var index = Math.floor((Math.random() * name_list.length));
      var data = localStorage.getItem(this.type);
      if(!data){
        this.prize = [name_list[index]];
      }
      else{
        data = JSON.parse(data);
        data[this.draw_count] = name_list[index];
        this.prize = data;
      }
    },
    go_back(){
      this.$router.go(-1);
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1 {
    text-align: center;
    font-size: 48px;
    color:#ebe8db;
  }
  .importaa {
    width: 240px;
    display: inline-block;
    height: 44px;
    line-height: 44px;
    border: 1px solid #d1ae6e;
    border-radius: 16px;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    color: #d1ae6e;
    margin-left:10px;
    font-family: Arial, Helvetica, sans-serif;
    background: rgba(0,0,0,0.5);
    vertical-align: top;
  }
  .btn{
    background: url(../../static/confirm.png)  no-repeat;
    width:200px;
    height:44px;
    font-size:24px;
    text-align: center;
    color:#ebe8db;
    line-height: 44px;
    margin:auto;
    margin-top:10px;
    cursor: pointer;
  }
  .outter {
    text-align:center;
    margin-top: 20px;
    margin-bottom: 10px;
  }
</style>
